<template>
	<view>
		<view>
			<table-title content="发票办理申请表详情"></table-title>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
			</view>
			<view class="item-table">
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor" :isLast="true"></view-item>
			</view>
			<small-title :isNeed="true" content="待开票列表"></small-title>
			<view style="margin-left: 20rpx;margin-right: 20rpx;margin-bottom: 50rpx;">
				<uni-table :newMinWidth="200" border stripe emptyText="暂无更多数据" >
				    <!-- 表头行 -->
				    <uni-tr>
						<uni-th style="width: 50rpx;" align="center">序号</uni-th>
				        <uni-th style="width: 50rpx;" align="center">开票项目</uni-th>
				        <uni-th style="width: 50rpx;" align="center">消费金额</uni-th>
				        <uni-th style="width: 50rpx;" align="center">消费时间</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
				    <uni-tr v-for="(item,index) in goodList" :key="index">
				        <uni-td align="center">
							<view style="width: 60rpx;">{{index + 1}}</view>
						</uni-td>
				        <uni-td>
							<view style="width: 200rpx;">
								<textarea style="width: 200rpx;" :auto-height="true" :disabled="true" v-model="item.typeName" ></textarea>
							</view>
						</uni-td>
				        <uni-td>
							<view style="width: 150rpx;">
								<input :disabled="true" type="number" v-model="item.amount" placeholder="请输入" />
							</view>
						</uni-td>
						<uni-td>
							<view style="width: 200rpx;">
								<textarea style="width: 200rpx;" :auto-height="true" :disabled="true" v-model="item.createTime" ></textarea>
							</view>
						</uni-td>
				    </uni-tr>
				</uni-table>
			</view>
			<view>
				<small-title :isNeed="true" content="发票类别"></small-title>
				<radio-group class="radiogroup-style">
					<view @click="chooseSpecialType(true)" class="first-radio">
						<radio :checked="invoiceSpecialType" color="#FF0000"></radio>
						<view>专用</view>
					</view>
					<view  @click="chooseSpecialType(false)" class="second-radio">
						<radio :checked="!invoiceSpecialType" color="#FF0000"></radio>
						<view>普通</view>
					</view>
				</radio-group>
			</view>
			<small-title :isNeed="true" content="发票抬头信息"></small-title>
			<view style="margin-left: 80rpx;margin-right: 50rpx;">
				<uni-forms :modelValue="formData">
					<uni-forms-item required label="名称" name="name">
						<uni-easyinput name="name" style="background-color: #ffffff;" type="text" v-model="formData.name" placeholder="请输入名称" />
					</uni-forms-item>
					<uni-forms-item required label="税号" name="taxNo">
						<uni-easyinput name="taxNo" style="background-color: #ffffff;" type="text" v-model="formData.taxNo" placeholder="请输入税号" />
					</uni-forms-item>
					<uni-forms-item :required="invoiceSpecialType" label="单位地址" name="address">
						<uni-easyinput name="address" style="background-color: #ffffff;" type="text" v-model="formData.address" placeholder="请输入单位地址" />
					</uni-forms-item>
					<uni-forms-item :required="invoiceSpecialType" label="电话号码" name="phone">
						<uni-easyinput name="phone" style="background-color: #ffffff;" type="number" v-model="formData.phone" placeholder="请输入电话号码" />
					</uni-forms-item>
					<uni-forms-item :required="invoiceSpecialType" label="开户银行" name="bank">
						<uni-easyinput name="bank" style="background-color: #ffffff;" type="text" v-model="formData.bank" placeholder="请输入开户银行" />
					</uni-forms-item>
					<uni-forms-item :required="invoiceSpecialType" label="银行账户" name="bankAccount">
						<uni-easyinput name="bankAccount" style="background-color: #ffffff;" type="number" v-model="formData.bankAccount" placeholder="请输入银行账户" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<button @click="oneKeyInput" style="width: 200rpx;font-size: 28rpx;color: #22B242;margin-bottom: 50rpx;">一键导入</button>
			<view v-if="isFlag" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="addOrder" >立即申请</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrder
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				userId:-1,
				state: '已受理',
				invoiceSetting:'',
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				goodList:[],
				token:'',
				invoiceSpecialType:true,
				formData:{
					'name':'',
					'taxNo':'',
					'address':'',
					'phone':'',
					'bank':'',
					'bankAccount':'',
				},
				isFlag:true,
				isFirst:true,
			}
		},
		methods: {
			oneKeyInput(){
				// this.formData.name = this.invoiceSetting.vatCompanyName
				// this.formData.taxNo = this.invoiceSetting.taxNo
				// this.formData.address = this.invoiceSetting.vatCompanyAddress
				// this.formData.phone = this.invoiceSetting.vatPhone.replace('-','')
				// this.formData.bank = this.invoiceSetting.vatBankName
				// this.formData.bankAccount = this.invoiceSetting.vatBakAccount
				let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/user/show/` + this.userId,
					header: {
						'Authorization': this.token,
					},
					method:'GET',
					success: function (res) {
						console.log("用户信息",res.data);
						if(res.data.code == 200){
							if(res.data.data.user.invoiceSetting != null){
								_this.formData.name = res.data.data.user.invoiceSetting.vatCompanyName
								_this.formData.taxNo = res.data.data.user.invoiceSetting.taxNo
								_this.formData.address = res.data.data.user.invoiceSetting.vatCompanyAddress
								_this.formData.phone = res.data.data.user.invoiceSetting.vatPhone.replace('-','')
								_this.formData.bank = res.data.data.user.invoiceSetting.vatBankName
								_this.formData.bankAccount = res.data.data.user.invoiceSetting.vatBakAccount
							}else{
								uni.showModal({
									content:"获取最新发票抬头失败，请联系管家",
									showCancel:false
								})
							}
						}
					}
				})
			},
			chooseSpecialType(state){
				this.invoiceSpecialType = state
			},
			/*
			功能：工单详细页处理通用函数
			参数：
			option：操作类型（先定成 创建、写入、查询）
			*/
			addOrder(){
				if(!this.isFirst){
					return -1
				}
				let flag = this.checkPara()
				let specialType = 0
				let taxInfo = {
						'name':this.formData.name,
						'taxNo':this.formData.taxNo,
						'address':this.formData.address,
						'phone':this.formData.phone,
						'bank':this.formData.bank,
						'bankAccount':this.formData.bankAccount,
					}
				if(flag != 0){
					uni.showModal({
						content:flag,
						showCancel:false,
					})
					return -1
				}
				this.isFirst = false
				if(this.invoiceSpecialType){
					specialType = 1
				}
				for (var i = 0; i < this.goodList.length; i++) {
					let orderInfo = {
						'typeId':parseInt(this.goodList[i].typeId),
						'typeName':this.goodList[i].typeName,
						'orderId':this.goodList[i].orderId,
						'amount':this.goodList[i].amount,
						'createTime':this.goodList[i].createTime,
					}
					let orderInfoStr = JSON.stringify(orderInfo)
					let data = {
						'orderInfo':orderInfo,
						'specialType':specialType,
						'taxInfo':taxInfo,
						'commentMsg':'租户申请开具发票',
						}
					console.log("rucan",data)
					var start = (new Date()).getTime();
					while((new Date()).getTime() - start < 200) {
						continue;
					}
					let _this = this
					let _i = i
					uni.request({
						url:`${ONLINE_SERVER_ADDRESS_BASE}/invoice/add`,
						header: {
							'Authorization': this.token,
						},
						// data:data,
						data:{
							orderInfo:orderInfoStr,
							specialType:specialType,
							taxInfo:JSON.stringify(taxInfo),
							commentMsg:'租户申请开具发票',
						},
						method:'POST',
						success: function (res) {
							console.log("提交成功",res.data);
							if(res.data.code !== 200){
								uni.showModal({
									content:"发票申请提交失败",
									showCancel:false
								})
							}else{
								if(_i == 0){
									_this.isFlag = false
									uni.showModal({
										title: '提示',
										content: '发票申请提交成功',
										showCancel:false,
										success: function (res) {
											if (res.confirm) {
												uni.navigateBack()
												console.log('用户点击确定');
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}
							}
						}
					})
				}
			},
			checkPara(){
				let errorMsg = ''
				if(this.invoiceSpecialType){
					if(this.formData.name == null || this.formData.name.trim() == ''){
						errorMsg = '请输入名称'
						return errorMsg
					}
					if(this.formData.taxNo == null || this.formData.taxNo.trim() == ''){
						errorMsg = '请输入税号'
						return errorMsg
					}
					if(this.formData.address == null || this.formData.address.trim() == ''){
						errorMsg = '请输入单位地址'
						return errorMsg
					}
					if(this.formData.phone == null || this.formData.phone.length < 5 || this.formData.phone.trim() == ''){
						errorMsg = '请输入电话号码'
						return errorMsg
					}
					if(this.formData.bank == null || this.formData.bank.trim() == ''){
						errorMsg = '请输入开户银行'
						return errorMsg
					}
					if(this.formData.bankAccount == null || this.formData.bankAccount.trim() == ''){
						errorMsg = '请输入银行账户'
						return errorMsg
					}
				}else{
					if(this.formData.name == null || this.formData.name.trim() == ''){
						errorMsg = '请输入名称'
						return errorMsg
					}
					if(this.formData.taxNo == null || this.formData.taxNo.trim() == ''){
						errorMsg = '请输入税号'
						return errorMsg
					}
				}
				return 0
			},
			
			back(){
				uni.navigateBack()
			},
		},
		onLoad(option) {
			//传入单号
			let userInfo = uni.getStorageSync('userinfo')
			this.userId = userInfo.id
			if(userInfo != null){
				this.invoiceSetting = userInfo.invoiceSetting
				this.userMsg.userBuilding = userInfo.title
				this.userMsg.userFloor = userInfo.floor
				this.token = uni.getStorageSync('token')
				this.goodList = JSON.parse(option.list)
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {

		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 160rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.radiogroup-style{
		width: 650rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		margin-left: 50rpx;
		justify-content: center;
		border: solid 1rpx #C0C0C0;
	}
	.textarea-style{
		display: flex;
		justify-content: center;
		width: 650rpx;
		height: 300rpx;
		margin-left: 50rpx;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
	}
	.first-radio{
		display: flex;
		height: 100rpx;
		width: 300rpx;
		align-items: center;
	}
	.second-radio{
		display: flex;
		height: 100rpx;
		align-items: center;
		margin-left: 50rpx;
	}
</style>
